<template>
	<div class="system-dept-container">
		<div style="width: 40%; float: left">
			<!-- 查询条件-->
			<el-card shadow="hover">
				<div class="system-dept-search mb15">
					<el-input size="small" placeholder="请输入公司名称" style="max-width: 180px" v-model="sysDictData.params.dicName" />
					<el-button size="small" type="primary" class="ml10" @click="initDictData">
						<el-icon>
							<elementSearch />
						</el-icon>
						查询
					</el-button>
				</div>
			</el-card>
			<!--分割线-->
			<el-divider></el-divider>
			<!--数据展示和分页-->
			<el-card shadow="never">
				<template #header>
					<div class="card-header">
						<span>字典数据列表</span>
						<!--新增等操作区域-->
						<!--<el-button size="small" type="success" class="ml10" @click="openAddWindows">
              <el-icon>
                <elementDocumentAdd/>
              </el-icon>
              新增字典
            </el-button>-->
					</div>
				</template>
				<!--表格展示区-->
				<el-table :data="sysDictData.data" style="width: 100%" default-expand-all @row-dblclick="rowClick">
					<el-table-column align="center" prop="dicCode" label="字典编码" show-overflow-tooltip />
					<el-table-column align="center" prop="dicName" label="字典名称" show-overflow-tooltip />
					<el-table-column align="center" prop="readonly" label="是否只读" show-overflow-tooltip />
					<el-table-column align="center" label="操作" show-overflow-tooltip width="140">
						<template #default="scope">
							<el-button size="mini" type="text" @click="openEditWindow(scope.row)" :disabled="scope.row.readonly"> 修改 </el-button>
							<el-popconfirm
								confirm-button-text="删除"
								cancel-button-text="取消"
								icon-color="red"
								title="确定删除这条记录吗？"
								@confirm="delRow(scope.row)"
							>
								<template #reference>
									<el-button size="mini" type="text" :disabled="scope.row.readonly">删除</el-button>
								</template>
							</el-popconfirm>
						</template>
					</el-table-column>
				</el-table>
				<!--分页-->
				<el-pagination
					@size-change="dictTableOnHandleSizeChange"
					@current-change="dictTableOnHandleCurrentChange"
					class="mt15"
					:pager-count="5"
					:page-sizes="[10, 20, 30]"
					v-model:current-page="sysDictData.params.pageNum"
					background
					v-model:page-size="sysDictData.params.pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="sysDictData.total"
				>
				</el-pagination>
			</el-card>
		</div>
		<div style="width: 59%; float: right">
			<!-- 查询条件-->
			<el-card shadow="hover">
				<div class="system-dept-search mb15">
					<el-input size="small" placeholder="请输入公司名称" style="max-width: 180px" v-model="sysDictItemData.params.itemName" />
					<el-button size="small" type="primary" class="ml10" @click="initDictItemData">
						<el-icon>
							<elementSearch />
						</el-icon>
						查询
					</el-button>
				</div>
			</el-card>
			<!--分割线-->
			<el-divider></el-divider>
			<!--数据展示和分页-->
			<el-card shadow="never">
				<template #header>
					<div class="card-header">
						<span>字典项数据列表</span>
						<!--新增等操作区域-->
						<el-button size="small" type="success" class="ml10" @click="openAddItemWindows" :disabled="sysDictItemData.readonly">
							<el-icon>
								<elementDocumentAdd />
							</el-icon>
							新增字典项
						</el-button>
					</div>
				</template>
				<!--表格展示区-->
				<el-table :data="sysDictItemData.data" style="width: 100%" default-expand-all>
					<el-table-column align="center" prop="itemCode" label="条目编码" show-overflow-tooltip />
					<el-table-column align="center" prop="itemName" label="条目名字" show-overflow-tooltip />
					<el-table-column align="center" prop="readonly" label="是否只读" show-overflow-tooltip />
					<el-table-column align="center" label="操作" show-overflow-tooltip width="140">
						<template #default="scope">
							<el-button
								size="mini"
								type="text"
								@click="openEditItemWindow(scope.row)"
								:disabled="scope.row.readonly || sysDictItemData.readonly"
							>
								修改
							</el-button>
							<el-popconfirm
								confirm-button-text="删除"
								cancel-button-text="取消"
								icon-color="red"
								title="确定删除这条记录吗？"
								@confirm="delItemRow(scope.row)"
							>
								<template #reference>
									<el-button size="mini" type="text" :disabled="scope.row.readonly || sysDictItemData.readonly"> 删除 </el-button>
								</template>
							</el-popconfirm>
						</template>
					</el-table-column>
				</el-table>
				<!--分页-->
				<el-pagination
					@size-change="dictItemTableOnHandleSizeChange"
					@current-change="dictItemTableOnHandleCurrentChange"
					class="mt15"
					:pager-count="5"
					:page-sizes="[10, 20, 30]"
					v-model:current-page="sysDictItemData.params.pageNum"
					background
					v-model:page-size="sysDictItemData.params.pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="sysDictItemData.total"
				>
				</el-pagination>
			</el-card>
		</div>
		<AddDict ref="addDictRef" @initDictData="initDictData" />
		<EditDict ref="editDictRef" @initDictData="initDictData" />
		<AddDictItem ref="addDictItemRef" @initDictItemData="initDictItemData" />
		<EditDictItem ref="editDictItemRef" @initDictItemData="initDictItemData" />
	</div>
</template>

<script lang="ts">
import { onMounted, reactive, ref, toRefs } from 'vue';
import { delDict, delDictItem, getDictItems, getDictList } from '/@/api/system/dict/index';
import AddDict from '/@/views/setting/dict/compoent/addDict.vue';
import EditDict from '/@/views/setting/dict/compoent/editDict.vue';
import AddDictItem from '/@/views/setting/dict/compoent/addDictItem.vue';
import EditDictItem from '/@/views/setting/dict/compoent/editDictItem.vue';

export default {
	name: 'systemDict',
	components: {
		AddDict,
		EditDict,
		AddDictItem,
		EditDictItem,
	},
	setup() {
		const addDictRef = ref();
		const editDictRef = ref();
		const addDictItemRef = ref();
		const editDictItemRef = ref();

		const state = reactive({
			sysDictData: {
				data: [],
				total: 0,
				loading: false,
				params: {
					pageNum: 1,
					pageSize: 10,
					dicName: '',
				},
			},
			sysDictItemData: {
				data: [],
				total: 0,
				loading: false,
				dicId: '',
				dicCode: '',
				readonly: false,
				params: {
					pageNum: 1,
					pageSize: 10,
					itemName: '',
				},
			},
		});
		// 初始化表格数据
		const initDictData = () => {
			getDictList(state.sysDictData.params).then((res) => {
				state.sysDictData.data = res.data;
				state.sysDictData.total = res.extra.total;
				rowClick(res.data[0]);
			});
		};
		// 表格点击事件
		const rowClick = (row: any) => {
			if (row == null) {
				state.sysDictItemData.dicId = '';
				state.sysDictItemData.dicCode = '';
				state.sysDictItemData.readonly = false;
				state.sysDictItemData.data = [];
				state.sysDictItemData.total = 0;
				return;
			}
			state.sysDictItemData.dicId = row['dicId'];
			state.sysDictItemData.dicCode = row['dicCode'];
			state.sysDictItemData.readonly = row['readonly'];
			initDictItemData();
		};
		// 初始化表格数据
		const initDictItemData = () => {
			getDictItems(state.sysDictItemData.dicId, state.sysDictItemData.params).then((res: any) => {
				state.sysDictItemData.data = res.data;
				state.sysDictItemData.total = res.data.length;
			});
		};

		//分页大小改变
		const dictTableOnHandleSizeChange = (val: number) => {
			state.sysDictData.params.pageSize = val;
			initDictData();
		};
		// 分页改变
		const dictTableOnHandleCurrentChange = (val: number) => {
			state.sysDictData.params.pageNum = val;
			initDictData();
		};

		//分页大小改变
		const dictItemTableOnHandleSizeChange = (val: number) => {
			state.sysDictItemData.params.pageSize = val;
			initDictItemData();
		};
		// 分页改变
		const dictItemTableOnHandleCurrentChange = (val: number) => {
			state.sysDictItemData.params.pageNum = val;
			initDictItemData();
		};

		// 打开新增字典项弹窗
		const openAddWindows = () => {
			addDictRef.value.openWindows();
		};
		// 打开编辑字典弹窗
		const openEditWindow = (row: any) => {
			editDictRef.value.openWindows(row.dicId);
		};

		const delRow = (row: any) => {
			delDict(row.dicId).then(() => {
				initDictData();
			});
		};

		// 打开新增字典项弹窗
		const openAddItemWindows = () => {
			addDictItemRef.value.openWindows(state.sysDictItemData.dicId, state.sysDictItemData.dicCode);
		};
		// 打开编辑字典项弹窗
		const openEditItemWindow = (row: any) => {
			editDictItemRef.value.openWindows(row.itemId);
		};

		const delItemRow = (row: any) => {
			delDictItem(row.itemId).then(() => {
				initDictItemData();
			});
		};

		// 页面加载时
		onMounted(async () => {
			initDictData();
		});

		return {
			addDictRef,
			editDictRef,
			addDictItemRef,
			editDictItemRef,
			rowClick,
			initDictData,
			initDictItemData,
			dictTableOnHandleSizeChange,
			dictTableOnHandleCurrentChange,
			dictItemTableOnHandleSizeChange,
			dictItemTableOnHandleCurrentChange,
			openAddWindows,
			openEditWindow,
			delRow,
			openAddItemWindows,
			openEditItemWindow,
			delItemRow,
			...toRefs(state),
		};
	},
};
</script>

<style scoped></style>
